.em-chat-content-item {
    >.content {
        >.metadata {
            .tms-alarm {
            }
            .ui.popup {
                > .content {
                    .ui.mini.buttons {
                        .ui.button {
                            padding: 8px;
                        }
                    }
                }
            }
        }
    }

    .textcomplete-container {
        position: relative;
        .append-to {
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
        }
    }
    .ui.comments &.comment {
        >.avatar~.content {
            margin-left: 3em;
        }
        .actions {
            >a {
                margin-right: 5px;
            }
            .dropdown {
                >a .ellipsis.icon {
                    margin-right: 0;
                }
                .item.tms-red {
                    color: red;
                }
            }
        }
        .chat-topic-repies {
            font-size: .875em;
            display: block;
            padding: 3px;
            border: 1px transparent solid;
            &:hover {
                background-color: white;
                border: 1px #e0e1e2 solid;
                .timeago {
                    display: none;
                }
                .view {
                    display: inline;
                }
                .newest {
                    // display: none;
                }
            }
            .reply {
                color: #2185d0;
                font-weight: 600;
            }
            .timeago {
                margin-left: 16px;
            }
            .view {
                margin-left: 16px;
                display: none;
            }
            .newest {
                display: block;
                margin-left: 27px;
                .quote {
                    &.left {
                        padding-right: 6px;
                    }
                    &.right {
                        padding-left: 6px;
                    }
                }
            }
        }
        >.content {
            >.metadata {
                .tms-alarm {
                    display: none;
                }
                .tms-stow {
                    display: none;
                }
            }
        }
        &:hover {
            .tools {
                display: block;
            }
            &:before {
                width: 4px;
            }
            .em-chat-content-item-footbar {
                .add-btn {
                    display: inline-block;
                }
            }
            >.content {
                >.metadata {
                    .tms-alarm {
                        display: inline-block;
                    }
                    .tms-stow {
                        display: inline-block;
                    }
                }
            }
        }
        &.active {
            &:before {
                width: 4px;
            }
        }
        &:before {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            bottom: 0;
            background: #2098D1;
            width: 0;
            -webkit-transition-property: width;
            transition-property: width;
            -webkit-transition-duration: 0.3s;
            transition-duration: 0.3s;
            -webkit-transition-timing-function: ease-out;
            transition-timing-function: ease-out;
        }
    }
    >.content {
        textarea.tms-edit-textarea {
            box-sizing: border-box;
            padding: 8px;
            border: 1px solid rgba(34, 36, 38, .15);
            outline: 0;
            border-radius: .28571429rem;
            box-shadow: 0 0 0 0 transparent inset;
        }
        >.metadata>.rating {
            @media only screen and (max-width: 767px) {
                display: none!important;
            }
        }
        >.markdown-body {
            span.at-user {
                cursor: pointer;
            }
            img {
                @media only screen and (min-width: 768px) {
                    max-width: 360px;
                    max-height: 360px;
                }
            }
        }
        >.tools {
            position: absolute;
            right: 0;
            bottom: 0;
            display: none;
            >.ui.button {
                margin: 0;
                background-color: rgba(224, 225, 226, 0.5);
                &:hover {
                    background-color: rgba(224, 225, 226, 1);
                }
            }
        }
    }
}
